<template>
  <div>
    <p>日期：
      <input type="checkbox" id="date" v-model="showDateVal">
      <label for="date">日期</label>
      <input type="checkbox" id="weekends" v-model="showWeekendsVal">
      <label for="weekends">星期</label>
      <input type="checkbox" id="year" v-model="showYearVal">
      <label for="year">年份</label>
    </p>
  </div>
</template>

<script>
export default {
  name: 'date-ctrl',
  props: {
    showDate: {
      type: Boolean,
      default: true
    },
    showWeekends: {
      type: Boolean,
      default: true
    },
    showYear: {
      type: Boolean,
      default: true
    }
  },
  data () {
    return {
      showDateVal: this.showDate,
      showWeekendsVal: this.showWeekends,
      showYearVal: this.showYear
    }
  },
  watch: {
    showDateVal: function(val) {
      this.$emit('updateShowDate', val);
    },
    showWeekendsVal: function(val) {
      this.$emit('updateShowWeekends', val);
    },
    showYearVal: function(val) {
      this.$emit('updateYear', val);
    }
  }
}
</script>
